<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.12.4.js">
		</script>
	</head>

	<body>
		<div id="main">
			<p>段落1</p>
			<p class="p2">段落2</p>
			<p>段落3</p>
			<p>段落4</p>
			<ul class="ul">
				<li id="li1">no.1</li>
				<li class="li2">no.2</li>
				<li>no.3</li>
				<p>段落5</p>
				<p name="name">段落6</p>
				<p name="uname">段落7</p>
				<p name="names">段落8</p>
				<p name="namms">段落9</p>
				<p name="namp">段落10</p>
			</ul>
			<a href="#" name="as">超链接1</a>
			<li>No.4</li>
			<ul class="ul2">
				<li>壹</li>
				<li>二</li>
				<li>叁</li>
				<li>肆</li>
				<li>伍</li>
				<li>陆</li>
				<li>柒</li>
			</ul>
			<h1>标题1</h1>
			<h2>标题2</h2>
			<h6>标题6</h6>
			用户名：<input type="text" name="username"/>
		</div>

		<script type="text/javascript">
			$("#li1").css("color", "red")
			$(".li2").css("color", "blue")
			$("li").css("background", "pink")
			$("#li1,.li2").css("background", "aqua")
			$("*").css("font-family", "微软雅黑")
			$("#main p").css("color", "brown")
			$("#main>p").css({....................................................................................
				"width": "200px",
				"background": "red"
			})
			$(".li2+li").css("background","yellow")
			$(".p2~p").css("color","yellow")
			//开头
			$("[name^='u']").css("color","red")
			//结尾
			$("[name$='p']").css("color","green")
			//包含
			$("[name*='s']").css("color","purple")
			//并且
			$("[name][name*='s']").css("color","aqua")
			//所有
			$("[name]").css("color","blue")
			//所有的name
			$("[name='name']").css("background","orange")
			//p标签下的name
			$("p[name!='name']").css("font-size","15px")
			//第一个
			$(".ul2 :first").css("background","red")
			//最后一个
			$(".ul2 :last").css("background","green")
			//偶数
			$(".ul2 :even").css("background","orange")
			//奇数
			$(".ul2 :odd").css("background","bisque")
			//第三个
			$(".ul2 :eq(2)").css("background","green")
			//第三个以后
			$(".ul2 :gt(2)").css("background","#B1191A")
			//第三个以前
			$(".ul2 :lt(2)").css("background","#FFA500")
			//标题背景
			$(":header").css("background","red")
			//聚焦
			$("input").focus();
			$(":focus").css("color","red")
			//隐藏
			$("p:visible").hide(1000)
			//显示
			$("p:visible").show(1000)
			//2
			$(".ul2").css("display","none")
			$(".ul2:hidden").show(1000)
		</script>
	</body>

</html>